import React, {Component} from 'react';
import {Breadcrumb, message, Form, Button, Select, Table, Space} from "antd";
import {NavLink} from "react-router-dom";
import {connect} from "react-redux";

const {Option} = Select;

@connect(state => ({userInfo: state.userInfo}))
class Shensu extends Component {
    state = {
        result: "",
        dialog: false, //结果框
        pagelistquery: {
            total: 0,
            page: 1,
            pagesize: 10,
            kefu_type: "shensu",
            state: "",
            id: ''
        },
        row: {},
        tableData: [] //列表信息
    }
    changState = async (row, state) => {
        let data = {
            kefu_id: row.shensu_id,
            kefu_state: state,
            type: 'shensu'
        }
        let result = await this.$axios.post("/admin/changkefustate", data);
        if (result.data.state.type === "SUCCESS") {
            message.success("状态更改成功");
            this.getShensuList();
        }
    }
    toUser(row) {
        this.props.history.push({
            pathname: "/manage/user",
            state: {
                user: row.shensu_user,
                jubao_id: ""
            }
        })
    }
    toJubao(row) {
        this.props.history.push({
            pathname: "/feedback/jubao",
            state: {
                jubao_id: row.shensu_jubao_id
            }
        })
    }
    deleteShensu = async (id) => {
        let result = await this.$axios.post("/admin/deletekefu", {id: id, type: 'shensu'});
        if (result.data.state.type === "SUCCESS") {
            message.success("删除成功");
            this.getShensuList();
        }
    }
    getShensuList = async (values) => {
        this.setState({loading: true});
        values = {...this.state.pagelistquery, ...values};
        this.setState({type: values.type, pagelistquery: values});
        let result = await this.$axios.post("/admin/kefullist", values);
        if (result.data.state.type === "SUCCESS") {
            let pagelistquery = this.state.pagelistquery;
            pagelistquery.total = result.data.count;
            this.setState({tableData: result.data.data, pagelistquery: pagelistquery});
            this.setState({loading: false});
        }
    }
    handleSizeChange = (current, size) => {
        let pagelistquery = this.state.pagelistquery
        pagelistquery.pagesize = size;
        this.setState({pagelistquery: pagelistquery});
        this.getShensuList();
    }
    handleCurrentChange = (page, pagesize) => {
        let pagelistquery = this.state.pagelistquery;
        pagelistquery.page = page;
        pagelistquery.pagesize = pagesize;
        this.setState({pagelistquery: pagelistquery});
        this.getShensuList();
    }
    componentDidMount() {
        this.getShensuList();
    }

    render() {
        const {pagelistquery, loading, tableData} = this.state;
        tableData.map((item, index) => {
            return item.key = index;
        });
        const columns = [
            {
                title: "创建日期",
                dataIndex: "createtime",
                render: text => <span>{this.dateFormat(text)}</span>
            },
            {
                title: "申诉账号",
                dataIndex: "shensu_user"
            },
            {
                title: "申诉内容",
                dataIndex: "shensu_content",
            },
            {
                title: "被封禁原因",
                dataIndex: "shensu_jubao_id",
                render:( text,record) => (
                    <Button type="text" style={{color: "#409EFF"}} size={"small"} onClick={() => {
                        this.toJubao(record)
                    }}>查看被封禁原因</Button>
                )
            },
            {
                title: "状态",
                dataIndex: "shensu_state",
                render: text => {
                    if (text === 1) return <span style={{color: "rgb(108, 187, 122)"}}>已处理</span>
                    else if (text === 0) return <span style={{color: "#409EFF"}}>未处理</span>
                    else return <span style={{color: "rgb(246, 12, 108)"}}>标记</span>
                }
            },
            {
                title: "审核人",
                dataIndex: "admin",
            },
            {
                title: "操作",
                dataIndex: "shensu_id",
                render: (text, record) => (
                    <Space size="small">
                        <Button type="text" style={{color: "#409EFF"}} size={"small"} onClick={() => {
                            this.toUser(record)
                        }}>去处理</Button>
                        <Button type="text" style={{color: "#409EFF"}} size={"small"} onClick={() => {
                            this.changState(record, 2)
                        }}>标记</Button>
                        <Button type="text" style={{color: "#409EFF"}} size={"small"} onClick={() => {
                            this.changState(record,1)
                        }}>已处理</Button>
                        <Button type="text" style={{color: "#409EFF"}} size={"small"} onClick={() => {
                            this.deleteShensu(text)
                        }}
                                disabled={this.props.userInfo.uinfo.jurisdiction.isfk !== '1' && this.props.userInfo.uinfo.username !== 'admin'}
                        >删除</Button>
                    </Space>
                )
            }
        ]
        return (
            <div>
                <div className="top">
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <NavLink to='/'>首页</NavLink>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            客服中心
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            账号申诉
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className="main">
                    <div>
                        <Form onFinish={this.getShensuList} layout={"inline"}>
                            <Form.Item name="state" initialValue="" style={{width: '15%', margin: "15px 10px 22px 0"}}>
                                <Select placeholder="状态">
                                    <Option value="">全部</Option>
                                    <Option value="1">已处理</Option>
                                    <Option value="0">未处理</Option>
                                    <Option value="2">标记</Option>
                                </Select>
                            </Form.Item>
                            <Form.Item style={{margin: "15px 10px 22px 0"}}>
                                <Button type="primary" htmlType="submit">查询</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <Table dataSource={tableData} columns={columns} bordered
                           loading={loading}
                           pagination={{
                               total: pagelistquery.total,
                               showSizeChanger: true,
                               showQuickJumper: true,
                               onChange: this.handleCurrentChange,
                               onShowSizeChange: this.handleSizeChange,
                               showTotal: total => `共 ${total} 条`,
                               position: ["bottomLeft"]
                           }}
                    ></Table>
                </div>
            </div>
        );
    }
}

export default Shensu;